<template>
  <div class="mt-5 bg-gray-300 p-5" title="父组件" :can-expan="false">
    <h3>父组件</h3>
    <ul>
      <li>子组件 age:{{ age }}<Button @click="invokeUpdateAge">修改</Button>失去了响应式</li>
      <li>子组件 names:{{ names }}<Button @click="invokeUpdateName">修改</Button>响应式</li>
      <li>子组件 address:{{ address }}<Button @click="invokeChangeAddress">修改</Button>响应式</li>
    </ul>

    <Child ref="childRef" />
  </div>
</template>
<script lang="ts" setup>
  import Child from './Child.vue';
  import { ref, reactive, onMounted } from 'vue';
  import { Button } from '@/components/Button';

  // childRef 作为子组件的引用，可以使用 ref 也可以使用 reactive
  let childRef = ref<any>(null);

  let names = ref(null);
  let age = ref(null);
  let address = reactive({});

  onMounted(() => {
    // setup 方法中，不能直接使用 childRef 中的属性，需要等待组件加载完成后，才能使用。
    // 这种方式，name 和 age 将失去响应式。
    names.value = childRef.value.names;
    age.value = childRef.value.age;
    address = childRef.value.address;
    console.log('age:', childRef.value.age);
    console.log('name:', childRef.value.names);
    console.log('address:', childRef.value.address);

    console.log('组件加载完成....', childRef);
  });

  function invokeUpdateName() {
    childRef.value.changeName();
    // js 中能感受到子组件中的数据变化，childRef 是响应式的。但是在页面绑定中，将失去响应式
    console.log('子组件名称:', childRef.value.names);
  }

  function invokeUpdateAge() {
    childRef.value.changeAge();
  }
  function invokeChangeAddress() {
    childRef.value.changeAddress();
  }
</script>

<style lang="less" scoped>
  button {
    margin-left: 5px;
  }

  li {
    margin-top: 10px;
  }

  div {
    border-radius: 10px;
  }
</style>
